<template>
  <div class="page-main">
    <div class="page-header-bg">
      <div class="page-header">
        <div class="page-header-follow">
          <p class="page-header-follow-title">Follo Us:</p>
          <a href="javascript:;" class="follow-method-wx"></a>
          <a href="javascript:;" class="follow-method-qq"></a>
        </div>
        <div class="page-header-site">
          <div class="page-header-s">
            <i class="i-site"></i>广州市增城区
          </div>
          <div class="page-header-p">
            <i class="i-phone"></i>+1 000263678
          </div>
        </div>
      </div>
      <div class="page-header-main">
        <a href="javascript:;" class="nav-logo">LIUYINSHE</a>
        <ul class="main-nav-list">
          <li class="main-nav-list-item">Home</li>
          <li class="main-nav-list-item">About</li>
          <li class="main-nav-list-item">Services</li>
          <li class="main-nav-list-item">Contact</li>
        </ul>
      </div>
      <div class="page-header-title">
        <div class="page-header-title-sm">留音社凭借多年的教学和运营管理经验，成功缔造了独特的教育发展模式</div>
        <h1>增城市内唯一一家多元素艺术培训中心</h1>
        <a href="javascript:;">了解更多</a>
      </div>
    </div>
    <div class="page-main-classInfo">
      <h1 class="page-classInfo-title">我们开设的课程</h1>
      <div class="page-classInfo-card-list">
        <div class="page-classInfo-card">
          <div class="classInfo-card-img-d"></div>
          <p class="class-card-title">钢琴课</p>
          <p
            class="class-card-intro"
          >Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
        </div>
        <div class="page-classInfo-card">
          <div class="classInfo-card-img-m"></div>
          <p class="class-card-title">钢琴课</p>
          <p
            class="class-card-intro"
          >Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
        </div>
        <div class="page-classInfo-card">
          <div class="classInfo-card-img-p"></div>
          <p class="class-card-title">钢琴课</p>
          <p
            class="class-card-intro"
          >Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
        </div>
      </div>
    </div>
    <div class="page-main-studentInfo">
      <h1 class="student-title">留音社学员风采</h1>
      <ul class="studentInfo-list">
        <li class="studentInfo-item">
          <img src="../assets/dance.jpeg" alt />
        </li>
        <li class="studentInfo-item">
          <img src="../assets/dance.jpeg" alt />
        </li>
        <li class="studentInfo-item">
          <img src="../assets/dance.jpeg" alt />
        </li>
        <li class="studentInfo-item">
          <img src="../assets/dance.jpeg" alt />
        </li>
        <li class="studentInfo-item">
          <img src="../assets/dance.jpeg" alt />
        </li>
        <li class="studentInfo-item">
          <img src="../assets/dance.jpeg" alt />
        </li>
      </ul>
    </div>
    <div class="page-main-faculty">
      <h1 class="page-main-faculty-title">PROFESSIONAL TEAM</h1>
      <div class="page-main-faculty-list">
        <div class="page-main-faculty-item">
          <div class="page-main-faculty-logo">
            <img src="/team1.jpg" alt />
          </div>
          <div class="faculty-text-sm">顶级私教</div>
          <div class="faculty-text-bg">Mariana Noe</div>
          <div class="faculty-intro">Lorem Ipsum has been the industry's standard since the 1500s.</div>
        </div>
        <div class="page-main-faculty-item">
          <div class="page-main-faculty-logo">
            <img src="/team1.jpg" alt />
          </div>
          <div class="faculty-text-sm">顶级私教</div>
          <div class="faculty-text-bg">Mariana Noe</div>
          <div class="faculty-intro">Lorem Ipsum has been the industry's standard since the 1500s.</div>
        </div>
        <div class="page-main-faculty-item">
          <div class="page-main-faculty-logo">
            <img src="/team1.jpg" alt />
          </div>
          <div class="faculty-text-sm">顶级私教</div>
          <div class="faculty-text-bg">Mariana Noe</div>
          <div class="faculty-intro">Lorem Ipsum has been the industry's standard since the 1500s.</div>
        </div>
      </div>
    </div>
    <div class="page-main-school-intro">
      <h1 class="school-intro-about">关于留音社</h1>
      <div class="school-intro-content">
        <div class="school-intro-img"></div>
        <div class="school-intro-item">
          <h1>关于我们</h1>
          <p>
            我们把创新、有趣和创造性的方式结合起来，教音乐，与学生接触，以充分发挥他们的潜力。
            创新的音乐课程和课程从初学者到儿童，青少年，成人，我们是你们最好的音乐学校。我们有适合每个人需要的程序。我们是唯一为儿童、成人和老人提供课程的专业音乐学校。
            以音乐创作与理论、音乐呈现、音乐学理论和音乐应用四个方向为主体，形成了传统优势、特色音乐与新兴复合型学科交叉融合、协调互补的发展格局。
            获奖方面，我们学校老师先后93人次获1067项国内外赛事奖项，其中获世界顶级音乐赛事有：陈亚获贝松国际交响乐作曲比赛第一大奖（1992年），李坚、宋思获玛格丽特隆国际钢琴比赛大奖（2000年、2004年），李昌永老师获第41届图鲁兹国际声乐比赛第二大奖（2008年）。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {}
};
</script>

<style lang='less'>
* {
  margin: 0;
  padding: 0;
}
.page-main .page-header-bg {
  background: url('~@/assets/banner1.jpg');
  background-position-x: center;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 768px;
}
.page-main .page-header-bg .page-header {
  line-height: 80px;
  height: 80px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.18);
}
.page-main .page-header-bg .page-header .page-header-site {
  float: right;
  width: 320px;
}
.page-main .page-header-bg .page-header .page-header-site .page-header-s {
  display: inline-block;
  font-size: 13px;
  color: #fff;
}
.page-main .page-header-bg .page-header .page-header-site .page-header-s .i-site {
  display: inline-block;
  height: 16px;
  width: 16px;
  background: url('~@/assets/zuobiao.png') no-repeat;
  background-position: center;
  background-size: 100%;
  margin: 0 14px;
}
.page-main .page-header-bg .page-header .page-header-site .page-header-p {
  display: inline-block;
  font-size: 13px;
  color: #fff;
}
.page-main .page-header-bg .page-header .page-header-site .page-header-p .i-phone {
  display: inline-block;
  height: 16px;
  width: 16px;
  background: url('~@/assets/phone.png') no-repeat;
  background-position: center;
  background-size: 100%;
  margin: 0 14px;
}
.page-main .page-header-bg .page-header .page-header-follow {
  float: right;
  width: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page-main .page-header-bg .page-header .page-header-follow .page-header-follow-title {
  font-size: 14px;
  color: #fff;
}
.page-main .page-header-bg .page-header .page-header-follow .follow-method-wx {
  display: inline-block;
  background: url('~@/assets/wx.png');
  background-size: 100%;
  background-position: center;
  width: 30px;
  height: 30px;
  margin: 14px;
}
.page-main .page-header-bg .page-header .page-header-follow .follow-method-qq {
  display: inline-block;
  background: url('~@/assets/qq.png');
  background-size: 100%;
  background-position: center;
  width: 30px;
  height: 30px;
  margin: 14px;
}
.page-main .page-header-bg .page-header-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 80px;
  line-height: 80px;
  width: 90%;
  margin: 0 60px;
  font-size: 18px;
  color: #fff;
}
.page-main .page-header-bg .page-header-main .nav-logo {
  font-size: 40px;
  text-decoration: none;
  color: #fff;
}
.page-main .page-header-bg .page-header-main .main-nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 400px;
  list-style: none;
}
.page-main .page-header-bg .page-header-title {
  text-align: center;
  margin: 0 auto;
  width: 1200px;
  padding-top: 256px;
}
.page-main .page-header-bg .page-header-title .page-header-title-sm {
  color: rgba(255, 255, 255, 0.47);
  font-size: 0.9em;
  margin-bottom: 40px;
}
.page-main .page-header-bg .page-header-title h1 {
  color: #fff;
  font-size: 40px;
  margin-bottom: 40px;
}
.page-main .page-header-bg .page-header-title a {
  text-decoration: none;
  padding: 12px 40px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.25em;
  font-size: 14px;
  background: #fb4386;
  border: transparent;
  text-transform: uppercase;
}
.page-main .page-main-classInfo {
  width: 1100px;
  margin: 0 auto;
  padding: 120px 0;
}
.page-main .page-main-classInfo .page-classInfo-title {
  text-align: center;
  font-weight: 600px;
  margin-bottom: 100px;
}
.page-main .page-main-classInfo .page-classInfo-card-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.page-main .page-main-classInfo .page-classInfo-card-list .page-classInfo-card {
  text-align: center;
  width: 300px;
}
.page-main .page-main-classInfo .page-classInfo-card-list .page-classInfo-card .classInfo-card-img-d {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url('~@/assets/dance_icon.png') no-repeat;
  background-size: 100%;
}
.page-main .page-main-classInfo .page-classInfo-card-list .page-classInfo-card .classInfo-card-img-m {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url('~@/assets/music_icon.png') no-repeat;
  background-size: 100%;
}
.page-main .page-main-classInfo .page-classInfo-card-list .page-classInfo-card .classInfo-card-img-p {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url('~@/assets/piano_icon.png') no-repeat;
  background-size: 100%;
}
.page-main .page-main-classInfo .page-classInfo-card-list .page-classInfo-card .class-card-title {
  font-size: 26px;
  font-weight: 500;
  margin: 30px 0;
}
.page-main .page-main-classInfo .page-classInfo-card-list .page-classInfo-card .class-card-intro {
  color: #999;
}
.page-main .page-main-studentInfo {
  width: 1100px;
  margin: 0 auto;
}
.page-main .page-main-studentInfo .student-title {
  text-align: center;
  font-weight: 600px;
  margin-bottom: 100px;
}
.page-main .page-main-studentInfo .studentInfo-list {
  text-align: center;
  list-style: none;
}
.page-main .page-main-studentInfo .studentInfo-list .studentInfo-item {
  display: inline-block;
  width: 300px;
  height: 250px;
  padding: 20px;
}
.page-main .page-main-studentInfo .studentInfo-list .studentInfo-item img {
  display: inline-block;
  height: 250px;
  width: 300px;
}
.page-main .page-main-faculty {
  width: 1100px;
  margin: 60px auto;
}
.page-main .page-main-faculty .page-main-faculty-title {
  text-align: center;
  margin: 60px 0;
}
.page-main .page-main-faculty .page-main-faculty-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.page-main .page-main-faculty .page-main-faculty-list .page-main-faculty-item {
  text-align: center;
  width: 280px;
}
.page-main .page-main-faculty .page-main-faculty-list .page-main-faculty-item .page-main-faculty-logo img {
  border-radius: 50%;
  border: 8px solid #fff;
  -webkit-box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
          box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
  height: 160px;
  width: 160px;
  margin-bottom: 20px;
}
.page-main .page-main-faculty .page-main-faculty-list .page-main-faculty-item .faculty-text-sm {
  font-size: 0.67em;
  color: #fb4386;
  font-weight: 600;
  letter-spacing: 2px;
  display: block;
  text-transform: uppercase;
}
.page-main .page-main-faculty .page-main-faculty-list .page-main-faculty-item .faculty-text-bg {
  color: #515156;
  margin-bottom: 0.8em;
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 3px;
}
.page-main .page-main-faculty .page-main-faculty-list .page-main-faculty-item .faculty-intro {
  color: #999;
}
.page-main .page-main-school-intro {
  width: 1100px;
  padding: 60px;
  margin: 0 auto;
}
.page-main .page-main-school-intro .school-intro-about {
  text-align: center;
  font-weight: 600px;
  margin-bottom: 100px;
}
.page-main .page-main-school-intro .school-intro-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.page-main .page-main-school-intro .school-intro-content .school-intro-img {
  background: url('~@/assets/s-icon.jpg') no-repeat;
  background-size: 100%;
  width: 390px;
  height: 580px;
}
.page-main .page-main-school-intro .school-intro-content .school-intro-item {
  display: inline-block;
  height: 580px;
  width: 390px;
  margin-left: 30px;
}
.page-main .page-main-school-intro .school-intro-content .school-intro-item h1 {
  font-size: 1.8em;
  font-weight: 500;
  letter-spacing: 2px;
  color: #212529;
}
.page-main .page-main-school-intro .school-intro-content .school-intro-item p {
  font-size: 20px;
  margin: 0;
  color: #888;
  line-height: 30px;
}

</style>
